<template>
  <div class="big-screen">
    <!-- 头部标题 -->
    <div class="header">
      <h1>2024年开门红业务实时监控</h1>
      <div class="time">{{ currentTime }}</div>
    </div>

    <div class="content">
      <!-- 左上面板 -->
      <div class="corner-panel left-top">
        <div class="panel-container">
          <div class="panel-title">定期开销户明细</div>
          <vue-seamless-scroll :data="depositDetails" :class-option="scrollOption" class="scroll-container">
            <ul class="scroll-item">
              <li v-for="(item, index) in depositDetails.slice(0,10)" :key="index">
                <span class="time">{{ formatTime(item.time) }}</span>
                <span class="customer">{{ item.customer }}</span>
                <span class="amount">{{ formatAmount(item.amount) }}</span>
                <span class="type" :class="item.type === '收入' ? 'up' : 'down'">{{ item.type }}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>

      <!-- 右上面板 -->
      <div class="corner-panel right-top">
        <div class="panel-container">
          <div class="panel-title">大额活期交易明细</div>
          <vue-seamless-scroll :data="currentDetails" :class-option="scrollOption" class="scroll-container">
            <ul class="scroll-item">
              <li v-for="(item, index) in currentDetails.slice(0,10)" :key="index">
                <span class="time">{{ formatTime(item.time) }}</span>
                <span class="customer">{{ item.customer }}</span>
                <span class="amount">{{ formatAmount(item.amount) }}</span>
                <span class="type" :class="item.type === '收入' ? 'up' : 'down'">{{ item.type }}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>

      <!-- 中间内容区 -->
      <div class="center-content">
        <div class="core-metrics">
          <div class="metric-item" v-for="(item, index) in coreMetrics" :key="index">
            <div class="metric-title">{{ item.title }}</div>
            <div class="metric-value-container">
              <count-to
                :start-val="0"
                :end-val="item.value"
                :duration="2000"
                :decimals="2"
                class="metric-value"
                prefix="¥"
                suffix="万"
              />
              <div class="metric-trend" :class="item.trend">
                {{ item.trend === 'up' ? '+' : '-' }}{{ item.rate }}%
                <i :class="item.trend === 'up' ? 'el-icon-top' : 'el-icon-bottom'" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 左下面板 -->
      <div class="corner-panel left-bottom">
        <div class="panel-container">
          <div class="panel-title">零售贷款交易明细</div>
          <vue-seamless-scroll :data="retailLoanDetails" :class-option="scrollOption" class="scroll-container">
            <ul class="scroll-item">
              <li v-for="(item, index) in retailLoanDetails.slice(0,10)" :key="index">
                <span class="time">{{ formatTime(item.time) }}</span>
                <span class="customer">{{ item.customer }}</span>
                <span class="amount">{{ formatAmount(item.amount) }}</span>
                <span class="type" :class="item.type === '收入' ? 'up' : 'down'">{{ item.type }}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>

      <!-- 右下面板 -->
      <div class="corner-panel right-bottom">
        <div class="panel-container">
          <div class="panel-title">对公贷款交易明细</div>
          <vue-seamless-scroll :data="corporateLoanDetails" :class-option="scrollOption" class="scroll-container">
            <ul class="scroll-item">
              <li v-for="(item, index) in corporateLoanDetails.slice(0,10)" :key="index">
                <span class="time">{{ formatTime(item.time) }}</span>
                <span class="customer">{{ item.customer }}</span>
                <span class="amount">{{ formatAmount(item.amount) }}</span>
                <span class="type" :class="item.type === '收入' ? 'up' : 'down'">{{ item.type }}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { parseTime } from '@/utils/ruoyi'

export default {
  name: 'BigScreen',
  components: {
    CountTo,
    vueSeamlessScroll
  },
  data() {
    return {
      timer: null,
      currentTime: '',
      // 核心指标数据
      coreMetrics: [
        { title: '定期净增', value: 12345.67, trend: 'up', rate: 12.34 },
        { title: '对私活期净增', value: 23456.78, trend: 'up', rate: 23.45 },
        { title: '对公活期净增', value: 34567.89, trend: 'down', rate: 3.45 },
        { title: '零售贷款净增', value: 45678.90, trend: 'up', rate: 45.67 },
        { title: '公司贷款净增', value: 56789.01, trend: 'down', rate: 5.67 }
      ],
      // 滚动配置
      scrollOption: {
        step: 0.2,
        limitMoveNum: 2,
        hoverStop: true,
        direction: 1,
        openTouch: true,
        singleHeight: 40,
        waitTime: 1000
      },
      // 定期明细数据
      depositDetails: this.generateMockData('定期'),
      // 活期明细数据
      currentDetails: this.generateMockData('活期'),
      // 零售贷款明细
      retailLoanDetails: this.generateMockData('零售贷款'),
      // 对公贷款明细
      corporateLoanDetails: this.generateMockData('对公贷款')
    }
  },
  created() {
    this.timer = setInterval(() => {
      this.currentTime = parseTime(new Date())
      // 更新核心指标数据
      this.updateMetrics()
      // 更新明细数据
      this.updateDetails()
    }, 5000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 生成模拟数据
    generateMockData(type) {
      const data = []
      for (let i = 0; i < 20; i++) {
        data.push({
          time: parseTime(new Date(Date.now() - i * 1000 * 60 * 30)),
          customer: type === '对公贷款' ? 
            `某某公司${Math.floor(Math.random() * 100)}` : 
            `客户${Math.floor(Math.random() * 100)}`,
          amount: (Math.random() * 1000000).toFixed(2),
          type: Math.random() > 0.5 ? '支出' : '收入'
        })
      }
      return data
    },
    // 更新核心指标
    updateMetrics() {
      this.coreMetrics = this.coreMetrics.map(item => ({
        ...item,
        value: +(item.value + (Math.random() * 1000 - 500)).toFixed(2),
        trend: Math.random() > 0.5 ? 'up' : 'down',
        rate: +(Math.random() * 50).toFixed(2)
      }))
    },
    // 更新明细数据
    updateDetails() {
      this.depositDetails.unshift({
        time: parseTime(new Date()),
        customer: `客户${Math.floor(Math.random() * 100)}`,
        amount: (Math.random() * 1000000).toFixed(2),
        type: Math.random() > 0.5 ? '支出' : '收入'
      })
      this.depositDetails.pop()

      // 同样更新其他明细...
      this.currentDetails = this.generateMockData('活期')
      this.retailLoanDetails = this.generateMockData('零售贷款')
      this.corporateLoanDetails = this.generateMockData('对公贷款')
    },
    formatTime(time) {
      // 只显示时分秒
      return time.split(' ')[1]
    },
    formatAmount(amount) {
      // 转换为万元并保留2位小数
      return (parseFloat(amount) / 10000).toFixed(2);
    }
  }
}
</script>

<style lang="scss" scoped>
.big-screen {
  height: 100vh;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  color: #fff;
  padding: 20px;
  overflow: hidden;

  .header {
    text-align: center;
    margin-bottom: 20px;
    h1 {
      font-size: 36px;
      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8%, #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 10px rgba(0,114,255,0.5);
    }
    .time {
      font-size: 18px;
      color: #00eaff;
      margin-top: 10px;
    }
  }

  .content {
    position: relative;
    height: calc(100vh - 120px);
    margin-top: 10px;
  }

  .center-content {
    position: absolute;
    left: 480px;
    right: 480px;
    top: 45%;
    transform: translateY(-50%);
    z-index: 1;
  }

  .core-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 0 20px;
    
    .metric-item {
      width: 300px;
      height: 180px;
      background: linear-gradient(135deg, rgba(6,30,93,0.9), rgba(0,234,255,0.1));
      border: none;
      position: relative;
      overflow: hidden;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid transparent;
        border-radius: 15px;
        background: linear-gradient(135deg, #0072ff, #00eaff, #01aaff) border-box;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
      }

      .metric-title {
        font-size: 22px;
        color: #00eaff;
        text-align: center;
        margin-bottom: 25px;
        text-shadow: 0 0 10px rgba(0,234,255,0.5);
      }

      .metric-value {
        font-size: 42px;
        font-weight: bold;
        text-align: center;
        background: linear-gradient(92deg, #00eaff 0%, #ffffff 50%, #00eaff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 20px rgba(255,255,255,0.3);
      }

      .metric-trend {
        font-size: 20px;
        margin-top: 20px;
        text-align: center;
        
        &.up {
          color: #00ff00;
          text-shadow: 0 0 10px rgba(0,255,0,0.5);
        }
        &.down {
          color: #ff4444;
          text-shadow: 0 0 10px rgba(255,0,0,0.5);
        }

        i {
          margin-left: 5px;
          font-size: 18px;
        }
      }

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 30px rgba(0,234,255,0.3);
        transition: all 0.3s ease;
      }
    }
  }

  .corner-panel {
    position: absolute;
    width: 460px;
    height: 380px;
    background: rgba(6,30,93,0.9);
    border: 2px solid rgba(0,234,255,0.4);
    box-shadow: 0 0 20px rgba(0,234,255,0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);

    &.left-top {
      top: 10px;
      left: 10px;
    }

    &.right-top {
      top: 10px;
      right: 10px;
    }

    &.left-bottom {
      bottom: 10px;
      left: 10px;
    }

    &.right-bottom {
      bottom: 10px;
      right: 10px;
    }

    .panel-container {
      height: 100%;
      padding: 15px;
      display: flex;
      flex-direction: column;
    }

    .panel-title {
      flex: none;
      font-size: 18px;
      padding: 10px 15px;
      margin-bottom: 15px;
    }

    .scroll-container {
      flex: 1;
      overflow: hidden;
    }

    .scroll-item {
      li {
        display: grid;
        grid-template-columns: 65px 100px 100px 60px; // 调整列宽
        gap: 8px;
        padding: 8px 10px;
        height: 36px;
        align-items: center;
        
        span {
          &.time {
            font-size: 14px;
            color: #7eb9ff;
          }
          
          &.customer {
            font-size: 14px;
            color: #e6e6e6;
          }
          
          &.amount {
            font-size: 14px;
            color: #ffd700;
            text-align: right;
            &::after {
              content: '万';
              font-size: 12px;
              margin-left: 2px;
              color: #999;
            }
          }
          
          &.type {
            width: 50px;
            text-align: center;
            padding: 2px 6px;
            font-size: 12px;
            border-radius: 10px;
            margin: 0 auto;
            
            &.up {
              background: linear-gradient(90deg, rgba(0,255,0,0.2), rgba(0,255,0,0.1));
              border: 1px solid rgba(0,255,0,0.3);
              color: #00ff00;
            }
            
            &.down {
              background: linear-gradient(90deg, rgba(255,0,0,0.2), rgba(255,0,0,0.1));
              border: 1px solid rgba(255,0,0,0.3);
              color: #ff4444;
            }
          }
        }

        &:hover {
          background: rgba(0,234,255,0.1);
        }
      }
    }
  }

  .scroll-container {
    height: calc(100% - 50px);
    overflow: hidden;
  }

  .scroll-item {
    li {
      display: grid;
      grid-template-columns: 100px 1fr 150px 80px;
      gap: 15px;
      padding: 10px 15px;
      height: 40px;
      align-items: center;
      border-bottom: 1px solid rgba(0,234,255,0.1);
      
      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
        &.time {
          color: #7eb9ff;
        }
        
        &.customer {
          color: #fff;
          text-align: left;
        }
        
        &.amount {
          color: #ffd700;
          text-align: right;
        }
        
        &.type {
          text-align: center;
          padding: 4px 8px;
          border-radius: 4px;
          font-weight: bold;
          
          &.up {
            background: rgba(0,255,0,0.2);
            color: #00ff00;
          }
          
          &.down {
            background: rgba(255,0,0,0.2);
            color: #ff0000;
          }
        }
      }
    }
  }

  // 添加动画
  .metric-item {
    animation: pulse 2s infinite;
  }
}

// 优化动画效果
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0,234,255,0.4);
  }
  50% {
    box-shadow: 0 0 30px 10px rgba(0,234,255,0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0,234,255,0.4);
  }
}
</style> 